<template>
  <div
    class="vc-list"
    :style="visual.parseStyle(compStyle)"
  >
    <div
      class="vc-list-item"
      :style="getStyle(dataList[0])"
    >
      <draggable
        v-model="currNode"
        :data="dataList[0]"
        :class="!currNode.children || currNode.children.length === 0 ? 'empty' : ''"
        @mouseoverNode="mouseoverNode"
        @activeNode="activeNode"
        @deleteNode="deleteNode"
      />
    </div>
    <div
      class="vc-list-item"
      v-for="(data, index) in dataList.slice(1)"
      :key="index"
      :style="getStyle(data)"
    >
      <draggable
        class="vc-list-item none-pointer-events"
        v-model="currNode.children"
        :data="data"
      />
    </div>
  </div>
</template>

<script setup>
import { ref, watch } from 'vue';
import Draggable from '@/admin/visual/draggable.vue';
import visual from "@/visual/js/visual";
import tool from "@/utils/tool";

const emit = defineEmits(['activeNode', 'deleteNode', 'mouseoverNode'])
const props = defineProps({
  node: Object,
  compStyle: Object,
  compData: Object
});
const currNode = ref(props.node);
const dataList = ref([{}]);

const activeNode = (node) => {
  emit('activeNode', node);
};

const deleteNode = (item) => {
  emit('deleteNode', item, currNode.value.children);
};

const mouseoverNode = (item) => {
  emit('mouseoverNode', item)
};

const init = async() => {
  dataList.value = (await visual.loadData(props.compData, {}, {}) || {}).data || [];
};

const getStyle = (data) => {
  const compStyle = props.compStyle || {};
  const itemList = compStyle['itemList'] || [];
  for (const item in itemList) {
    let result = false;
    (tool.groupBy(item.conditionList || [], (item) => [item.grouping || 999]) || []).forEach(conditionList => {
      result = result || checkConditionList(conditionList, data);
    });
    if (result) {
      return visual.parseStyle(item, {'flex-grow': 1});
    }
  }
  return {'flex-grow': 1};
};

const checkConditionList = (conditionList, data) => {
  let result = true;
  (conditionList || []).forEach(condition => {
    const testValue = data[condition.condition];
    switch(condition.type) {
      case "包含":
        result = result && (testValue || '').indexOf(condition.value || '') >= 0;
        break;
      case "不包含":
        result = result && (testValue || '').indexOf(condition.value || '') === -1;
        break;
      case "等于":
        result = result && (testValue || '') === (condition.value || '');
        break;
      case "不等于":
        result = result && (testValue || '') !== (condition.value || '');
        break;
      case "大于":
        result = result && parseFloat(testValue || '0') > parseFloat(condition.value || '0');
        break;
      case "大于等于":
        result = result && parseFloat(testValue || '0') >= parseFloat(condition.value || '0');
        break;
      case "小于":
        result = result && parseFloat(testValue || '0') < parseFloat(condition.value || '0');
        break;
      case "小于等于":
        result = result && parseFloat(testValue || '0') <= parseFloat(condition.value || '0');
        break;
    }
  });
  return result;
};

watch(() => props.node, (val) => {
  currNode.value = val;
}, {immediate: true});

watch(() => props.compData, () => {
  init();
}, { deep: true, immediate: true });
</script>

<style scoped lang="scss">
.none-pointer-events {
  pointer-events: none;
}
</style>